<!DOCTYPE html>
<head>
    <title>X/Z Report</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel='stylesheet' href='./css/bootstrap/bootstrap.min.css' type='text/css'/>
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
    <link rel='stylesheet' href='./css/main.css' type='text/css'/>
    <link rel="stylesheet" href="./css/skins/all.css" type='text/css'/>
    <!--jquery-->
    <!--jquery-->
    <script type="text/javascript" src='./js/lib/jquery/jquery-1.10.2.min.js'></script>
    <script type="text/javascript" src='./js/lib/iscroll/iscroll.js'></script>
    <script type="text/javascript" src='./js/lib/underscore/underscore.min.js'></script>
    <script type="text/javascript" src='./js/lib/backbone/backbone.js'></script>
    <script type="text/javascript" src='./js/lib/fastclick.js'></script>
</head>
<style>
    
    @font-face{
        font-family:'Trajan Pro';
        src:url('file:///android_asset/fonts/TrajanProBold.otf');
    }

    html, body {
        height: 100%;
        background:#f1f2f7;
    }

    .header {
        left: 0;
        right: 0;
        height:60px;
        z-index: 1002;
        background-color: #050505;
        color: #fff;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .header .brand{
        float:left;
    }
    .fixed-top {
        position: fixed;
        box-shadow: 1px 0 3px rgba(0, 0, 0, .15);
    }
    .top-nav {
        margin-top: 14px;
    }
    ul.top-menu {
        margin-right: 15px;
        margin-top: 0;
    }

    ul.top-menu > li > a {
        color: #666666;
        font-size: 16px;
        background: #f6f6f6;
        padding: 4px 8px;
        margin-right: 15px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        padding-right: 8px !important;
    }

    ul.top-menu>li>a:hover, ul.top-menu>li>a:focus {
        background: #32D2C9;
        text-decoration: none;
        color: rgba(0, 0, 0, 0.3) !important;
        padding-right: 8px !important;
    }

    .top-nav ul.top-menu>li.language ul.dropdown-menu li img {
        border-radius: 0;
        -webkit-border-radius: 0;
        width: 18px;
    }

    .top-nav ul.top-menu>li {
        margin-left: 10px;
    }

    .top-nav ul.top-menu>li>a:hover, .top-nav ul.top-menu>li>a:focus {
        border: 1px solid #f6f6f6;
        background: #f6f6f6 !important;
        border-radius: 100px;
        -webkit-border-radius: 100px;
    }

    .top-nav .dropdown-menu.extended.logout {
        top: 50px;
    }

    .top-nav .nav .caret {
        border-bottom-color: #A4AABA;
        border-top-color: #A4AABA;
    }

    .top-nav ul.top-menu>li>a:hover .caret {
        border-bottom-color: #000;
        border-top-color: #000;
    }
    #top_menu .nav>li, ul.top-menu>li {
        float: left;
    }
    .container {
        margin: 0 auto;
        height: 100%;
        width:1140px;
        padding: 80px 0px 10px 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .wintitle {
		margin: 0px auto;
		float: left;
		position: absolute;
		text-align: center;
		right: 100px;
		left:100px;
    }
    .wintitle h3{
        font-family: "Trajan Pro"!important;
    }
    .columns {
        height: 100%;
    }


    .datapanel {
        overflow:auto;
        height: 100%;
    }
    .article-tree {
        background-color:#fff;
        border-right: 1px solid #ffffff;
        overflow-x: hidden; overflow-y: hidden;
    }
    .content-area {
        background-color:#fff;
    }
    .toggle-right-box {
        float: left;
        background: #f6f6f6;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        width: 35px;
        height: 35px;
    }

    .toggle-right-box:hover {
        background: #32D2C9;
    }

    .toggle-right-box:hover .fa-bars {
        color: rgba(0, 0, 0, 0.3);
    }

    .toggle-right-box .fa-bars {
        cursor: pointer;
        display: inline-block;
        font-size: 15px;
        padding: 10px;
        color: #bfbfc1;
    }
	.footer {
	    height: 80px;
		border-color:#eff2f7 ;
		font-size: 13px;
		font-weight: 400;
		background: #f3f3f3;
        box-shadow:0px -1px 3px rgba(0,0,0,.15);	    
	}
	
	.footer .crosssect {
	 background: #98d7ad;
	}
	.footer .col-md-3 {
	 height:80px;
	}
    .wordWarp{
        word-wrap:break-word
    }
    .reportitemworp{

        border-bottom: 3px solid #fff;
    }
    .summaryitemworp{
        background: #f1f1f1;
        border-bottom: 3px solid #fff;
    }


    .blackitemwrap{
        background: #050505;
        color: #ffffff;
        line-height: 39px;
        font-size: 23px;
    }
    .dateFont{
        line-height: 39px;
        font-size: 14px;
        color: #ffffff;
    }
    .divLi{
        display: block;
        FLOAT: left;
        background-color:#fff;
        border-right: 8px solid #f1f2f7;
        margin-bottom: 8px;
        verflow: hidden;
    }
    
	.square-box{
	    position: relative;
	    width: 100%;
	    overflow: hidden;
	    background: #fefefe;
	}
	.square-box:before{
	    content: "";
	    display: block;
	    padding-top: 100%;
	}
	.square-content{
	    position:  absolute;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    color: #333;
	}
	.square-content .tbl {
	   display: table;
	   width: 100%;
	   height: 100%;
	}
	.square-content span {
	    display: table-cell;
	    text-align: center;
	    vertical-align: middle;
	    color: #333;
	}
	.zsection .square-box {
	 background:#eee;
	} 
	.info {
		position: absolute;
		top: 0px;
		height: 40px;
		left: 0px;
		right: 0px;
		background-color: #f9bf35;
		font-size: 14px;
		padding:4px 6px;	
	}   
</style>
<body>
<header class="header fixed-top clear fix">
    <div class="wintitle">
        <h3>2017年月销售报表</h3>
    </div>
    <div class="brand">
        <div class="sidebar-toggle-box">
           <div id="backBtn"></div>
        </div>
    </div>
</header>
<div class="container wrapper">
 <div  id="salesDetailDiv">
   <ul id="salesDetailUl" >
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-01">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">一月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-02">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">二月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-03">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">三月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-04">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">四月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li>
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-05">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">五月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-06">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">六月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-07">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">七月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-08">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">八月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 	
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-09">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">九月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-10">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">十月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 	
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-11">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">十一月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 
	<li class="col-md-3 divLi">
		<div class="row divSession" month="2015-12">
			   <div class="square-box">
			    <div class="square-content">
			     <div class="tbl">
			        <span>
				      <div style="font-size:38px;">十二月</div>
				    </span></div>
				 </div>
			   </div>			
		</div>
	</li> 												
   </ul>
 </div>
</div>
<script type="text/javascript" src='./js/app/views/monthly_sales_detail_view.js'></script>
</body>
</html>



